<div id="instances" class="tab-section">
  <div role="tabpanel">
{{#let (hash
  statuses=(if status (split status ',') undefined)
  sources=(if source (split source ',') undefined)
) as |filters|}}
  {{#let (or sortBy "Name:asc") as |sort|}}
    {{#if (gt items.length 0) }}
    <input type="checkbox" id="toolbar-toggle" />
    <ConsulServiceInstanceSearchBar
      @sources={{externalSources}}
      @search={{search}}
      @onsearch={{action (mut search) value="target.value"}}

      @sort={{sort}}
      @onsort={{action (mut sortBy) value="target.selected"}}

      @filter={{filters}}
      @onfilter={{hash
        status=(action (mut status) value="target.selectedItems")
        source=(action (mut source) value="target.selectedItems")
      }}
      />
    {{/if}}
{{#let (filter (filter-predicate 'serviceInstance' filters) items) as |filtered|}}
  {{#let (sort-by (comparator 'serviceInstance' sort) filtered) as |sorted|}}
    <ChangeableSet @dispatcher={{searchable 'serviceInstance' sorted}} @terms={{search}}>
      <BlockSlot @name="set" as |searched|>
        <ConsulServiceInstanceList @routeName="dc.services.instance" @items={{searched}}/>
      </BlockSlot>
      <BlockSlot @name="empty">
        <EmptyState>
          <BlockSlot @name="body">
            <p>
              There are no services.
            </p>
          </BlockSlot>
        </EmptyState>
      </BlockSlot>
    </ChangeableSet>
  {{/let}}
{{/let}}
  {{/let}}
{{/let}}
  </div>
</div>
